$selection-summary-height: 66px;
$selection-summary-with-error-height: 118px;

.vulnerability-header {
  grid-gap: $gl-spacing-scale-4;
  // Mobile layout.
  grid-template-areas: 'title' 'description' 'buttons';

  // Desktop layout.
  @media (min-width: $breakpoint-md) {
    grid-template-areas: 'title buttons' 'description description';
    grid-template-columns: 1fr min-content;
  }

  .header-title {
    grid-area: title;
  }

  .header-description {
    grid-area: description;
  }

  .header-buttons {
    grid-area: buttons;
  }
}

.security-dashboard-filters {
  position: sticky;
  top: $calc-application-header-height;
  @include gl-z-index-1;
}

.vulnerability-list {
  --security-filter-height: 85px;

  isolation: isolate;

  @media (min-width: $breakpoint-sm) {
    .checkbox {
      @include gl-pl-4;
      @include gl-pr-0;
      // Width needs to be something other than auto for the column to shrink down to the content
      // width. The actual value needs to be less than the content, but not 0 (safari issue).
      width: 1px;

      // If the checkbox column is shown, reduce the padding of the column to the right of it.
      + td,
      + th {
        @include gl-pl-4;
      }
    }

    .detected {
      width: 9%;
    }

    .status {
      width: 8%;
    }

    .severity {
      @include gl-w-10p;
    }

    .description {
      max-width: 0;
    }

    .identifier {
      width: 16%;
    }

    .scanner {
      @include gl-w-10p;
    }

    .activity {
      width: 5%;
    }
  }

  // Due to position: sticky not being supported on Chrome (https://caniuse.com/#feat=css-sticky),
  // the property is assigned to the th element as a workaround
  thead th {
    // The !important works around https://github.com/bootstrap-vue/bootstrap-vue/pull/6371.
    position: sticky !important;
    @include gl-border-top-0;
    // The checkboxes use z-index: 1, so we need to place the headers higher so that the checkboxes
    // don't show on top of the headers when scrolling down.
    @include gl-z-index-2;
    top: calc(#{$calc-application-header-height} + var(--security-filter-height));
    // Need to use an inset box-shadow here for the bottom border because position: sticky will hide
    // any borders once the table headers become sticky.
    box-shadow: inset 0 -1px $gray-100;
  }

  thead.below-selection-summary th {
    top: calc(#{$calc-application-header-height} + var(--security-filter-height) + #{$selection-summary-height});
  }

  tr:hover .vulnerability-title {
    @include gl-text-decoration-underline;
  }

  .card.with-error + table thead.below-selection-summary th {
    top: calc(#{$calc-application-header-height} + var(--security-filter-height) + #{$selection-summary-with-error-height});
  }
}

.has-group-by .vulnerability-list {
  --security-filter-height: 149px;
}

// When the selection summary container is show, we add a margin-bottom.
.has-group-by .vulnerability-list .below-selection-summary { 
  --security-filter-height: 165px;
}